<template>
  <a-modal title="外链"
           width="60%"
           :visible="showModel"
           @cancel="handleCancel"
           @ok="handleOk"
           cancelText="关闭"
           :closable="false">
    <a-form-model>
      <a-row>
        <a-col :span="12">
          <a-form-model-item>
            <a-input placeholder="请粘贴链接" v-model="model.url"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="6" style="margin:0 10px">
          <a-form-model-item>
            <a-input placeholder="请输入描述" v-model="model.name"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="4" style="margin-top:8px">
            <span @click="addLink">
              <a-icon type="plus-circle" :style="{ fontSize: '22px', color: '#1E90FF' }"/>
            </span>
        </a-col>
      </a-row>
    </a-form-model>
    <a-table ref="table" size="middle"
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
             :loading="loading"
             class="pop-table">
      <span slot="url" slot-scope="text, record,index">
         <a :href="text" target="_blank">{{text}}</a>
      </span>
        <span slot="action" slot-scope="text, record,index">
          <a-popconfirm title="确认删除?" okText="确认" cancelText="取消" @confirm="deleteLink(index)">
            <a href="#" style="margin-right: 10px">删除</a>
          </a-popconfirm>
        </span>
    </a-table>

  </a-modal>
</template>

<script>
  //选题外链弹窗
  import {postAction} from "../../../api/manage";

  export default {
    name: "TopicLinkModel",
    props: ['taskNo'],
    data() {
      return {
        loading: false,
        showModel: false,
        model: {},
        dataSource: [],
        columns: [{
          title: '链接',
          align: 'center',
          dataIndex: 'url',
          scopedSlots: {
            customRender: 'url'
          },
        },
          {
            title: '描述',
            align: 'center',
            dataIndex: 'name'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {
              customRender: 'action'
            },
            align: 'center',
            width: 170
          }
        ],
      }
    },
    methods: {
      show(linkList) {
        this.dataSource = JSON.parse(JSON.stringify(linkList));
        this.showModel = true;
      },
      handleOk() {
        //提交外链信息
        this.loading = true;
        postAction('task/taskInfo/updateTaskOutLink',
          {taskNo: this.taskNo, outLinkList: this.dataSource}).then(res => {
          if (res.success) {
            this.$emit('updateLink',this.dataSource);
            this.handleCancel();
          } else {
            this.$message.error(res.message);
          }
        }).finally(() => {
          this.loading = false;
        })
      },
      handleCancel() {
        this.showModel = false;
      },
      addLink() {
        this.dataSource.push(this.model);
        this.model = {};
      },
      deleteLink(index) {
        this.dataSource.splice(index, 1);
      }
    }
  }
</script>

<style scoped>

</style>